.single-goods-posters {
  min-height: 100vh;
  background-color: #5b5b5b;

  .status_bar {
    width: 100%;
    height: var(--status-bar-height);
    // background-color: #FBD220;
  }
}

.ctx {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

// 编辑海报
.edit-poster {
  height: 1032rpx;
  padding: 20rpx 85rpx;

  .edit-box {
    width: 100%;
    height: 100%;
    background-size: 100% 100% !important;
    position: relative;
    padding-top: 105rpx;
  }

  // 头部小标题
  .header-title {
    padding-top: 30rpx;

    .text {
      margin-left: 16rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #343434;
    }
  }

  // 大小标题
  .title-box {
    margin-top: 26rpx;
    padding: 0 18rpx;
    text-align: center;

    .big-title {
      position: relative;
      height: 100rpx;
      lint-height: 100rpx;
      border: 2rpx dashed #ffdc0e;

      .text {
        font-size: 66rpx;
        font-weight: bold;
        color: #343434;
      }
    }
    .small-title {
      position: relative;
      height: 54rpx;
      line-height: 54rpx;
      border: 2rpx dashed #ffdc0e;

      .text {
        font-size: 36rpx;
        font-weight: 500;
        color: #666666;
      }
    }

    .iconquxiaoxunjia {
      position: absolute;
      top: 4rpx;
      right: 8rpx;
      z-index: 3;
    }
  }

  // 添加图片box
  .img-box {
    width: 510rpx;
    height: 340rpx;
    margin: 40rpx auto 30rpx;
    background: #fffdef;
    border: 2rpx dashed #ffe324;
    text-align: center;
    position: relative;

    .btn {
      line-height: 340rpx;
    }

    .img {
      width: 100%;
      height: 100%;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .iconquxiaoxunjia {
      position: absolute;
      top: 4rpx;
      right: 8rpx;
      z-index: 3;
    }
  }

  // 店铺信息
  .store-info {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 183rpx;
    background: linear-gradient(127deg, #fdd422, #ffe23e);
    border-top: 2rpx dashed #ffdc0e;
    padding: 0 35rpx;

    .info-box {
      .logo {
        width: 102rpx;
        height: 102rpx;
        // background-color: #fff;
        margin-right: 12rpx;

        image {
          width: 102rpx;
          height: 102rpx;
        }
      }

      .store-text {
        height: 102rpx;
      }

      .big-text {
        font-size: 30rpx;
        font-weight: 500;
        color: #343434;
        line-height: 32rpx;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: break-word;
        white-space: normal !important;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .small-text {
        font-size: 24rpx;
        font-weight: bold;
        color: #666666;
      }
    }

    .store-qrcode {
      width: 120rpx;
      height: 120rpx;
      // background-color: #fff;

      image {
        width: 120rpx;
        height: 120rpx;
      }
    }
  }
}

// 底部box容器
.footer-box {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 99;
}

// 预选背景图列表
.bg-img-box {
  margin: 18rpx 0;
  .bg-img-list {
    white-space: nowrap;
    overflow-x: auto;

    .bg-img-item {
      width: 150rpx;
      height: 150rpx;
      border: 4rpx solid transparent;
      margin-left: 24rpx;
      display: inline-block;
      transition: all 0.3s;

      &:last-child {
        margin-right: 24rpx;
      }

      image {
        width: 100%;
        height: 100%;
      }
    }

    .bd-active {
      border-color: #fbd220;
    }
  }
}

// 底部按钮
.footer-btns {
  height: 98rpx;
  line-height: 98rpx;

  .btn-goback {
    padding: 0 40rpx;
  }

  .btn-box {
    flex: 1;
    border-radius: 10px 0px 0px 0px;
    overflow: hidden;
  }

  .update-goods {
    width: 190rpx;
    background: #343434;
    text-align: center;
    color: #ffe23e;
  }

  // 分享按钮
  .btn-share {
    flex: 1;
    background: linear-gradient(-90deg, #fdd422, #ffe23e);
    text-align: center;

    .text {
      margin-left: 24rpx;
      font-size: 34rpx;
      font-weight: 500;
      color: #343434;
    }
  }
}

.store-qrcode-big {
  transform: translateY(600rpx);
  .img {
    width: 200rpx;
    margin: 0 auto;

    image {
      width: 100%;
    }
  }
  .text {
    text-align: center;
    font-size: 24rpx;
    color: #666;
  }
}
